<template>
	<div class="app-search">
		<div class="app-search__container">
			<a-input
				allowClear
				:value="curValue"
				:placeholder="placeholder"
				class="app-search__input"
				@change="onChange"
				@pressEnter="search"
			>
				<template #prefix>
					<SearchOutlined />
				</template>
			</a-input>
		</div>
	</div>
</template>

<script setup lang="ts">
import { Ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
const curValue: Ref<string> = ref('');
const placeholder: Ref<string> = ref(
	App.ts('common.appsearch.searchcontent', '搜索内容')
);
const notification = App.getGlobalNotificationHelper();
const search = () => {
	notification.notice('app', 'refresh', { value: curValue.value });
};
const onChange = ($event: any) => {
	curValue.value = $event.target.value;
	if (!curValue.value) {
		search();
	}
};
</script>
